<!--
 * @Description: 商品分类选择弹窗
 * @Author: liyujie
 * @Date: 2021/04/09
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/04/09
-->

<template>
    <section class="wrapper">
        <el-dialog
            :title="title"
            width="780px"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <div class="content-wrapper">
                <el-checkbox-group
                    v-model="typeSelection"
                    class="type-list"
                >
                    <div
                        class="type-item"
                        v-for="(item, index) in type_list"
                        :key="index"
                        @mouseenter="handleClick(item, index)"
                        @mouseleave="handleLeave(item, index)"
                    >
                        <el-checkbox
                            :label="item.no"
                            @change="handleChange($event, item, index)"
                        >
                            <div>
                                {{ item.title | setNumber }}
                                <span
                                    v-if="item.checkedLength"
                                    style="color: #ee4e59"
                                >
                                    ({{ item.checkedLength }})
                                </span>
                            </div>
                        </el-checkbox>
                        <div
                            v-if="index === now_index && item.show && item.children.length !== 0"
                            class="sub-type-list-wrap"
                        >
                            <el-checkbox-group
                                v-model="subTypeSelection"
                                class="sub-type-list"
                            >
                                <el-checkbox
                                    v-for="(option,key) in item.children"
                                    :label="option.no"
                                    :key="key"
                                    class="sub-type-item"
                                    @change="subTypeChange($event, item)"
                                >
                                    {{ option.title | setNumber }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <el-button
                            type="text"
                            :style="{
                                transform: item.show && index === now_index ? `rotate(180deg)` : '',
                                transition: 'all 0.2s',
                                marginLeft: '8px'
                            }"
                            v-if="item.children.length"
                        >
                            <i class="el-icon-caret-bottom" />
                        </el-button>
                    </div>
                </el-checkbox-group>
            </div>
            <div class="dialog-footer">
                <el-button
                    size="medium"
                    :style="{width: '126px', height: '36px'}"
                    @click="dialogVisible = false"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '126px', height: '36px', marginLeft: '52px'}"
                    @click="handleEmit()"
                >
                    保 存
                </el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import { deepClone } from "@/assets/js/utils";

export default {
    name: "GoodsTypeSelect",
    props: {
        title: {
            type: String,
            default: '商品分类'
        }
    },
    data() {
        return {
            dialogVisible: false,
            type_list: [],
            typeSelection: [],
            subTypeSelection: [],
            now_index: 6
        };
    },
    filters: {
        setNumber (val) {
            if(val.length > 4) {
                return val.slice(0,4) + '...';
            } else {
                return val;
            }
        }
    },
    mounted() {},
    methods: {
        /**
         * 显示弹窗
         * @param data
         */
        show(data) {
            this.dialogVisible = true;
            this.subTypeSelection = data;
            this.getTypeList();
        },

        /**
         * 弹窗关闭 重置
         */
        handleClose() {
            this.subTypeSelection = [];
            this.typeSelection = [];
        },

        /**
         * @description 获取分类列表
         */
        getTypeList () {
            this.$post('/student/shop_goods_type%5Cget_list_linkage', {}, resp => {
                if (resp.code === 1) {
                    this.type_list = resp.data.list;
                    this.type_list.map(item => {
                        item.nos = item.children.map(sItem => {
                            return sItem.no;
                        });
                        item.checkedLength = this.subTypeSelection.filter(no => {
                            return item.nos.includes(no);
                        }).length;
                        if((item.checkedLength === item.nos.length) && item.children.length) {
                            this.typeSelection.push(item.no);
                        }
                    });
                }
            });
        },

        /**
         * 点击类目全选
         * @param event
         * @param index
         * @param item
         */
        handleChange(event, item, index) {
            if(event) {
                this.$set(item, 'checkedLength', item.nos.length);
                this.subTypeSelection = Array.from(new Set([...item.nos, ...this.subTypeSelection]));
            } else {
                this.subTypeSelection = this.subTypeSelection.filter(no => {
                    return !item.nos.includes(no);
                });
                this.$set(item, 'checkedLength', 0);
            }
        },

        /**
         * 点击显示二级分类、
         */
        handleClick(row, index) {
            if(row.show) {
                this.$set(row, 'show', false);
                this.now_index = -1;
            } else {
                this.$set(row, 'show', true);
                this.now_index = index;
            }
        },

        handleLeave(row) {
            this.$set(row, 'show', false);
            this.now_index = -1;
        },

        /**
         * 确定
         */
        handleEmit() {
            this.$emit('confirm', this.subTypeSelection);
            this.dialogVisible = false;
        },

        /**
         * 点击每一项二级分类
         * @param event
         * @param row
         */
        subTypeChange(event,row) {
            if(event) {
                this.$set(row, 'checkedLength', row.checkedLength + 1);
                if(row.checkedLength === row.nos.length) {
                    if(!this.typeSelection.includes(row.no)) {
                        this.typeSelection.push(row.no);
                    }
                }
            } else {
                this.$set(row, 'checkedLength', row.checkedLength - 1);
                if(row.checkedLength === 0) {
                    if(this.typeSelection.indexOf(row.no) !== -1) {
                        this.typeSelection.splice(this.typeSelection.indexOf(row.no), 1);
                    }
                }
            }
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .content-wrapper {
        padding: 24px 36px;
        .type-list {
            display: flex;
            flex-wrap: wrap;
            .type-item {
                width: 25%;
                padding-left: 24px;
                margin-bottom: 24px;
                display: flex;
                align-items: center;
                position: relative;
                .sub-type-list-wrap {
                    width: 260px;
                    min-width: 200px;
                    background: #ffffff;
                    position: absolute;
                    left: -24px;
                    top: 36px;
                    z-index: 1000;
                    box-shadow:0 0 20px 0 rgba(0,0,0,0.16);
                    display: flex;
                    flex-wrap: wrap;
                    box-sizing: border-box;
                    padding: 12px;
                    border-radius: 5px;
                    .sub-type-list {
                        display: flex;
                        flex-wrap: wrap;
                    }
                    .sub-type-item {
                        margin-bottom: 12px;
                        width: 30%;
                    }
                }
            }
        }
    }
    .dialog-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 0 36px;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 0;
        min-height: 400px;
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    }
}
</style>
